<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>锤子商城-周洪民</title>
   <link rel="stylesheet" href="/css/index.css">
   <!-- swiper -->
   <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
</head>

<body>
   <header>
      <!-- 头部复用 -->
   </header>
   <main>
      <!-- 轮播图 -->
      <div class="swiper-container banner">
         <div class="swiper-wrapper" id="swiper">
            
         </div>
         <script type="text/html" id="swiperTemplate">
            {{each carousel img}}
            <div class="swiper-slide"><img src="{{img.image[0]}}" alt=""></div>
            {{/each}}
         </script>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>

      <!-- 四个图片 -->
      <section class="wrap" id="wrap">

      </section>
      <!-- 网上接口数据渲染 -->
      <script type="text/html" id="wrapTemplate">
         {{each list item}}
         <a href="#">
            <div class="wrap-img">
               <img src="{{item.image}}" alt="">
               <div class="mask"></div>
            </div>
         </a>
         {{/each}}
      </script>
      <!-- 热卖商品 -->
      <section class="hotShop">
         <!-- 上方文字 -->
         <div class="hotShop-title">
            <h2>热门商品</h2>
            <span class="next" id="next">›</span>
            <span class="prev  click" id="prev">‹</span>
         </div>
         <!-- 下方图片 -->
         <div class="hotShop-wrap">
            <div class="box" id="hotShopWarp">

            </div>
         </div>
         <!-- 渲染数据 -->
         <script type="text/html" id="hotShopWarpTemplate">
            {{each list item}}
            <!-- 每一个图片 -->
            <div class="hotShop-wrap-img">
               <a href="/html/detailsPage.html?id={{item.sku_id}}">
                  <img style="width:216px;height:216px" src="{{item.spu.sku_info[0].ali_image}}" alt="">
                  <div class="hotShop-wrap-img-text">
                     <h3 style="font-size:14px;">{{item.spu.sku_info[0].title}}</h3>
                     <h5>{{item.spu.sku_info[0].sub_title}}</h5>
                     <div class="hotShop-color">
                        <!-- <span class="white"></span>

                     <span class="green"></span>
                     <span class="yellow"></span> -->
                     </div>
                     <div class="hotShop-text">
                        <p>￥{{item.spu.sku_info[0].price}}</p>
                        <del></del>
                     </div>
                  </div>
               </a>
            </div>
            {{/each}}
         </script>
      </section>
      <section class="allContent" id="allContent">
         <!-- 列表页 坚果3pro及配件 -->

      </section>
      <script type="text/html" id="allContentTemplate">
         {{each list item}}
         <section class="list">
            <!-- 上方文字 -->
            <div class="list-top">
               <h2>{{item.title}}</h2>
            </div>
            <!-- 下方内容 -->
            <div class="list-content">
               <!-- 图片 -->
               <div class="list-content-img">
                  <img src="{{item.tabs[0].tab_items[0].image}}" alt="">
               </div>
              
               <!-- 手机 -->
               {{each item.tabs[0].tab_items item1}}
               {{if item1.spu}}
               
               <div class="list-content-wrap">
                  <a href="/html/detailsPage.html?id={{item1.sku_id}}">
                  <div class = 'img-box'>
                  {{each item1.spu.sku_info img}}
                     
                  <img src="{{img.ali_image}}" alt="" style="width:216px;height:216px;"class='img-pro'>
                  {{/each}}
                  </div>
                  <h3>{{item1.spu.sku_info[0].title}}</h3>
                  <h5>
                     {{item1.spu.sku_info[0].sub_title}}
                  </h5>
                  <div class="span">
                  {{each item1.spu.shop_info.spec_v2[0].spec_values item2 index}}
                  {{if item2.image}}
                  <span class='change' data-index='{{index}}'><img src="{{item2.image}}" alt=""></span>
                  {{else if !item2.image}}
                  <span style="border:none;"></span>
                  {{/if}}
                  {{/each}}
                  </div>
                  <div class="price">
                     <p>￥{{item1.spu.sku_info[0].price}}</p>
                     <del></del>
                  </div>
               </a>
               </div>
               {{/if}}
               {{/each}}
            </div>
         </section>
         {{/each}}
   </script>
   </main>
   <footer>

   </footer>
   <script src="/libs/require.js" data-main="/js/index"></script>
</body>

</html>